<template>
  <div style="margin-bottom: 20px;">
    <el-dialog :title="edit_main_title" append-to-body v-dialogDrag :visible.sync="edit_flag"
               @open="handleOpenConfig" :before-close="handleClose" width="500px">
      <el-form class="ml30" ref="sendMsgRef" :rules="rules" :model="createObj">
        <el-form-item label="仓库/库区" prop="storeHouseId">
          <el-cascader
            class="w184"
            placeholder="选择仓库/库区"
            :options="storeAreaData"
            filterable
            change-on-select
            @change="storeAreaChange"
            v-model="storeHouseSelected"
          >
            <template slot-scope="{ node, data }">
              <span>{{ data.label }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label='车架号:' prop="vins">
          <el-input type="textarea" :rows="2" style="width: 250px"
                    v-model="createObj.vins"  placeholder="请输入车架号, 以小写英文逗号来分隔"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="handleClose">取消</el-button>
        <el-button type="primary" :disabled="createConfirmBtnFlag" @click="createConfirmClick">确定</el-button>
      </el-row>
      <div style="height:20px"></div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import * as FactoryPreparationAPI from '@/api/factoryPreparation/factoryPreparation'
  export default {
    name: '',
    components: {
    },
    props: ['edit_flag', 'edit_main_title', 'edit_select_row', 'edit_params'],
    data() {
      return {
        title_data: {},
        table_data: [],
        createConfirmBtnFlag: false, // 按钮
        storeAreaData: [], // 仓库-库区
        createObj: {
          vins: '',
          storeHouseId: '', // 仓库
          areaId: '' // 库区
        },
        storeHouseSelected: [],
        subCatProps: {
          value: 'storeHouseId',
          label: 'storeHouseName',
          children: 'areaList'
        }, // 格式化映射工单信息
        subCatProps2: {
          value2: 'areaId',
          label2: 'areaName'
        }, // 格式化映射工单信息2
        rules: {
          vins: [
            { required: true, message: '请输入车架号', trigger: 'change' }
          ],
          storeHouseId: [
            { required: true, message: '请选择库位/库区', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      // 弹窗页打开初始
      handleOpenConfig(data) {
        this.getHouseList()
        this.createObj = {
          vins: '',
          storeHouseId: '', // 仓库
          areaId: '' // 库区
        }
        this.storeHouseSelected = []
        // this.createDialogVisible = true
        this.createConfirmBtnFlag = false
      },
      // 三级连选 目的地地址
      storeAreaChange(val) {
        const selectArr = val
        if (selectArr[0]) {
          this.createObj.storeHouseId = selectArr[0].toString()
        }
        if (selectArr[1]) {
          this.createObj.areaId = selectArr[1].toString()
        }
        console.log('storeAreaChange()-val', selectArr)
        // console.log('storeAreaChange()-storeHouseSelected', this.storeHouseSelected)
      },
      // 根据 选择数据 ['1', '2','1'] 得到选中 表现值
      threeCode2AreaName(AreaData, arr) {
        const [oneCode, twoCode, threeCode] = arr
        let _province, _city, _area
        const _areaData = AreaData
        let addObj = {}
        if (_areaData.length > 0) {
          for (const k in _areaData) {
            if (_areaData[k].value === oneCode) {
              _province = _areaData[k].label
              const _areaData2 = _areaData[k].children
              for (const k2 in _areaData2) {
                if (_areaData2[k2].value === twoCode) {
                  _city = _areaData2[k2].label
                  const _areaData3 = _areaData2[k2].children
                  for (const k3 in _areaData3) {
                    if (_areaData3[k3].value === threeCode) {
                      _area = _areaData3[k3].label
                      break
                    }
                  }
                }
              }
            }
          }
        }
        addObj = {
          province: _province,
          city: _city,
          area: _area
        }
        return addObj
      },
      areaName2twoCode(resData, subCatProps, subCatProps2) {
        const { value, label, children } = subCatProps
        const { value2, label2 } = subCatProps2
        const now_arr = resData
        const new_arr = []
        for (let c = 0; c < now_arr.length; c++) {
          const item = now_arr[c]
          const new_2_arr = []
          for (let k = 0; k < item[children].length; k++) {
            const item2 = item[children][k]
            new_2_arr.push({
              value: item2[value2],
              label: item2[label2]
            })
          }
          new_arr.push({
            value: item[value],
            label: item[label],
            children: new_2_arr
          })
        }
        // console.log('输出重构后的常规数组', new_arr)
        return new_arr
      },
      // 仓库-库区查询
      getHouseList() {
        FactoryPreparationAPI.queryStoreArea().then(result => {
          if (result.code === 0) {
            if (result.data && result.data.length > 0) {
              this.storeAreaData = this.areaName2twoCode(result.data, this.subCatProps, this.subCatProps2)
            }
          } else {
            this.$message({
              title: '错误提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      // 备料入库提交
      createConfirmClick() {
        const that = this
        that.$refs['sendMsgRef'].validate(valid => {
          if (valid && that.checkObj(that.createObj)) {
            this.createConfirmBtnFlag = true
            FactoryPreparationAPI.inboundPrepare(that.createObj).then(result => {
              if (result.code === 0) {
                this.$message({
                  message: '备料入库提交成功',
                  type: 'success',
                  duration: 2000
                })
                this.createConfirmBtnFlag = false
                // this.createDialogVisible = false
                // this.getList()
                this.$emit('edit-confirm', false)
              } else {
                this.$message({
                  title: '错误提示',
                  message: result.message,
                  type: 'error',
                  duration: 2000
                })
                this.createConfirmBtnFlag = false
              }
            }).catch(() => {
              this.createConfirmBtnFlag = false
            })
          }
        })
      },
      checkObj(obj) {
        const { areaId } = obj
        console.log('areaId', areaId)
        if (!areaId) {
          this.$message({
            message: '请选择库区',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      },
      handleClose() {
        this.$emit('edit-close', false)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
